<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <link href="bs/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/set.css" rel="stylesheet"/>
    <script src="bs/js/bootstrap.min.js"></script>

</head>
<body>
     <!--头部部分-->
     <section class="header">
         <div class="bd">
             <div class="nav">
                 <UL class="breadcrumb">
                     <li>
                         <a href="#">网站首页
                     <Span>HOME</Span>
                         </a>
                     </li>

                     <li>
                         <a href="#">关于我们
                     <Span>ABOUT US</Span>
                         </a>
                     </li>
                     <li>
                         <a href="#">作品展示
                     <Span>WORK</Span>
                         </a>
                     </li>
                     <li>
                         <a href="#">客片欣赏
                     <Span>SHOW</Span>
                         </a>
                     </li>
                     <li>
                         <a href="#">优惠活动
                     <Span>EVENTS</Span>
                         </a>
                     </li>
                     <li>
                         <a href="#">服务团队
                     <Span>TEAM</Span>
                         </a>
                     </li>
                     <li>
                         <a href="#">最新团购
                     <Span>PANIC</Span>
                         </a>
                     </li>
                     <li>
                         <a href="#">联系我们
                     <Span>CONTACTUS</Span>
                         </a>
                     </li>


                 </UL>
             </div>
             <div class="logo">
                 <a href="#">
                     <img src="img/logo.png" style="width: 100%;height: 50px;">
                 </a>
             </div>
         </div>
     </section>
      <!--轮播部分    -->
     <section class="banner">
         <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
             <!-- Indicators -->
             <ol class="carousel-indicators">
                 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                 <li data-target="#carousel-example-generic" data-slide-to="3"></li>
             </ol>
             <!-- Wrapper for slides -->
             <div class="carousel-inner" role="listbox">
                 <div class="item active">
                     <img src="img/01.jpg" >
                 </div>
                 <div class="item">
                     <img src="img/02.jpg" >
                 </div>
                 <div class="item">
                     <img src="img/03.jpg" >
                 </div>

                 <div class="item">
                     <img src="img/04.jpg" >
                 </div>
            </div>
             <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                 <!--<i class="glyphicon glyphicon-chevron-left" aria-hidden="true"></i>-->

             </a>
             <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                 <!--<i class="glyphicon glyphicon-chevron-right" aria-hidden="true"></i>-->

             </a>
         </div>
     </section>
      <!--主题内容-->
     <section class="main">
         <div class="center">
             <!--热播新闻-->
             <div class="hot">
                 <div class="tittle">
                    <div class="tittle-left">
                        <a href="#">
                            <img src="img/tittle1.gif">
                        </a>
                        <p>
                            <img src="img/tittle1a.gif">
                        </p>
                    </div>
                    <div class="tittle-right">
                         <a href="#" class="" style="float: right;">
                             <img src="img/tittle3.gif">
                         </a>
                    </div>
                 </div>
                 <div class="hot-center">
                     <div class="hot-left">
                           <a>
                               <img src="img/hot1.jpg">
                           </a>
                           <h3>《网络专属团》特辑6600元</h3>
                           <div class="bg">
                             <a class="bg-left"><img src="img/bg.png"></a>
                             <p  class="bg-right">
                         原价：<span><strong style="color: red;text-decoration: line-through;">￥12656</strong></span><br>
                         节省：   <span><strong>￥6056</strong></span><br>
                         折扣：     <span><strong>5.8折</strong></span>
                             </p>
                         </div>
                           <div class="less">
                               <p>活动日期：</p>
                               <p>2016.09.17-2017.01.01</p>
                               <p> <strong style="color: red;text-decoration: line-through;">1121</strong> 1300人已预约</p>
                           </div>
                     </div>
                     <div class="hot-right">
                         <ul class="item-ul">
                             <li class="item-li">
                                 <a>
                                     <img  class="showimg" src="img/li1.jpg" style="width: 100%;height: 315px">
                                     <img  class="hidimg" src="img/logo.png" style="width: 100%;height: 150px">
                                 </a>
                             </li >
                             <li class="item-li">
                                 <a>
                                     <img  class="showimg" src="img/li2.jpg" style="width: 100%;height: 315px">
                                     <img  class="hidimg" src="img/logo.png" style="width: 100%;height: 150px">
                                 </a>
                             </li >
                             <li class="item-li">
                                 <a>
                                     <img  class="showimg" src="img/li3.jpg" style="width: 100%;height: 315px">
                                     <img  class="hidimg" src="img/logo.png" style="width: 100%;height: 150px">
                                 </a>
                             </li >
                             <li class="item-li">
                                 <a>
                                     <img  class="showimg" src="img/li4.jpg" style="width: 100%;height: 315px">
                                     <img  class="hidimg" src="img/logo.png" style="width: 100%;height: 150px">
                                 </a>
                             </li >

                         </ul>
                     </div>
                 </div>
             </div>
             <!--作品展示    -->
             <div class="works">
                 <div class="tittle">
                     <div class="tittle-left">
                         <a href="#">
                             <img src="img/tittle4.gif">
                         </a>
                         <p>
                             <img src="img/tittle1a.gif">
                         </p>
                     </div>
                     <div class="tittle-right">
                         <a href="#" class="" style="float: right;">
                             <img src="img/tittle3.gif">
                         </a>
                     </div>
                 </div>
                     <div class="works-center">
                         <div class="works-left">
                             <a>
                                 <img  class="showimg" src="img/works1.jpg" style="height: 350px;width: 100%">
                             </a>
                             <a>
                                 <img class="showimg" src="img/works2.jpg" style="height: 350px;width: 100%">
                             </a>
                         </div>
                         <div class="works-main">
                              <a>
                                  <img  class="showimg" src="img/works4.jpg" style="height: 700px;width: 100%">
                              </a>


                         </div>
                         <div class="works-right">
                             <a>
                                 <img  class="showimg" src="img/works5.jpg" style="height: 350px;width: 100%">
                             </a>
                             <a>
                                 <img  class="showimg" src="img/works6.jpg" style="height: 350px;width: 100%">
                             </a>
                         </div>
                     </div>
             </div>
             <!--关于我们-->
             <div class="about">
                 <div class="tittle">
                     <div class="tittle-left">
                         <a href="#">
                             <img src="img/us.gif">
                         </a>
                         <p>
                             <img src="img/us1.gif">
                         </p>
                     </div>
                     <div class="tittle-right">
                         <a href="#" class="" style="float: right;">
                             <img src="img/tittle3.gif">
                         </a>
                     </div>
                 </div>
                 <div class="us">
                     <a>
                         <img src="img/team.jpg" style="width: 100%;">
                     </a>
                     <a>
                         <img src="img/us2.gif" style="width: 100%;">
                     </a>
                     <p class="phone">
                         456789123
                     </p>
                 </div>
             </div>
             <!--场景展示-->
             <div class="place">
                 <div class="tittle">
                     <div class="tittle-left">
                         <a href="#">
                             <img src="img/placetittle1.gif">
                         </a>
                         <p>
                             <img src="img/tittle1a.gif">
                         </p>
                     </div>
                     <div class="tittle-right">
                         <a href="#" class="" style="float: right;">
                             <img src="img/tittle3.gif">
                         </a>
                     </div>
                 </div>
                 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
                     <!-- Indicators -->
                     <ol class="carousel-indicators">
                         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                         <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                         <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                         <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                         <li data-target="#carousel-example-generic" data-slide-to="4"></li>
                     </ol>

                     <!-- Wrapper for slides -->
                     <div class="carousel-inner" id="carousel-inner" role="listbox">
                         <div class="item active">
                             <img src="img/place1.jpg" >
                         </div>
                         <div class="item">
                             <img src="img/place2.jpg" >
                         </div>
                         <div class="item">
                             <img src="img/place5.jpg" >
                         </div>
                         <div class="item">
                             <img src="img/place4.jpg" >
                         </div>
                         <div class="item">
                             <img src="img/place3.jpg" >
                         </div>


                     </div>
                 </div>

             </div>
             <!--结尾内容-->
             <div class="down">
                 <div class="down-left">
                     <div class="left-tit">
                         <a href="#">
                             <img src="img/down1.gif">
                         </a>
                         <p>
                             <img src="img/tittle1a.gif">
                         </p>
                     </div>
                     <div class="left-main">
                         <a>
                             <img src="img/leftdown.jpg">
                         </a>
                     </div>
                     <p>韩式婚纱摄影90后的爱情故事</p>
                     <p>如何应对拍照尴尬</p>
                     <p>拍摄婚纱照注意事项</p>
                 </div>
                 <div class="down-main">
                     <div class="left-tit">
                         <a href="#">
                             <img src="img/down2.gif">
                         </a>
                         <p>
                             <img src="img/tittle1a.gif">
                         </p>
                      </div>
                      <div>
                      <a>
                          <img src="img/leftdown2.jpg">
                      </a>
                     </div>
                 </div>
                 <div class="down-right">
                     <div class="left-tit">
                         <a href="#">
                             <img src="img/down3.gif">
                         </a>
                         <p>
                             <img src="img/tittle1a.gif">
                         </p>
                     </div>
                     <div>
                         <a>
                             <img src="img/downleft4.jpg">
                         </a>
                     </div>
                 </div>


         </div>
         </div>
     </section>
     <!--底部部分-->
     <div class="foot">
         <div class="foot-first">
            <div class="foot1">
                <i>
                    <img src="img/contact.gif">
                </i>
            </div>
         </div>
         <div class="foot-second">
             <div class="foot2">
                 <div class="foot2-left">
                     <a>
                         <img src="img/logo.png">
                     </a>
                 </div>
                 <div class="foot2-right">
                     <ul>
                         <li>
                             <a href="#">
                                 <Span>HOME</Span>
                             </a>
                         </li>

                         <li>
                             <a href="#">
                                 <Span>ABOUT US</Span>
                             </a>
                         </li>
                         <li>
                             <a href="#">
                                 <Span>WORK</Span>
                             </a>
                         </li>
                         <li>
                             <a href="#">
                                 <Span>SHOW</Span>
                             </a>
                         </li>
                         <li>
                             <a href="#">
                                 <Span>EVENTS</Span>
                             </a>
                         </li>
                         <li>
                             <a href="#">
                                 <Span>TEAM</Span>
                             </a>
                         </li>
                         <li>
                             <a href="#">
                                 <Span>PANIC</Span>
                             </a>
                         </li>
                         <li>
                             <a href="#">
                                 <Span>CONTACTUS</Span>
                             </a>
                         </li>


                     </UL>
                 </div>

             </div>
         </div>
         <div class="foot-third">
             <div class="foot3">
                 <p>韩国婚纱摄影版权所有 韩投资管理（上海）有限公司 沪备166号</p>
                 <p>COPYRIGHT TO KOREA MISSLUNA STUDIO 2004~2016</p>
             </div>
         </div>
         <div class="foot-fourth">
             <div class="foot4">
                 <i>友情链接</i>
                 <a>上海</a>
                 <a>北京</a>
                 <a>天津</a>
                 <a>南京</a>
                 <a>武汉</a>
             </div>
         </div>
     </div>

    <script>
        $(document).ready(function(){
                $(".nav>ul>li").hover(function() {
                            $(this).addClass("hover");
                            $(this).find("a:first").css("color","red");
                            $(".nav ul ul").slideUp("fast");
                            $(this).find("a:first").animate({"top": "15px"},"fast");
                            $(this).find("span").animate({"top": "-50px"},"fast");
                            if (!$(this).find("ul").is(":animated")) $(this).find("ul").slideDown("fast")
                        },
                        function() {
                            $(this).removeClass("hover");
                            $(this).find("a:first").css("color","");
                            $(this).find("a:first").animate({"top": "0px"},"fast");
                            $(this).find("span").animate({"top": "0px"},"fast");
                            $(".nav ul ul").slideUp("fast")
                        });
            $(".hot-right>ul>li").hover(function() {
                        $(this).find(".hidimg").show(500);
                        $(this).find(".showimg").css({"filter": "url(blur.svg#blur)","-webkit-filter": "blur(3px)"});
                        $(this).find(".hidimg").animate({"top": "20%"},"normal");
                    },
                    function() {
                        $(this).find(".hidimg").hide(500);
                        $(this).find(".showimg").css({"filter": "","-webkit-filter": ""});
                        $(this).find(".hidimg").animate({"top": "60%"},"normal");

                    })


            });
    </script>
</body>
</html>